@import "compass/css3";

*{margin:0;padding:0;border:0;text-decoration:none;
list-style:none;}


.clearfix {
	*zoom:1;
}
.clearfix:after,.clearfix:before {
	content:"";
	line-height:0;
	display:table;
}
.clearfix:after {
	clear:both;
}
@font-face{
	font-family:Raphaelicons;
	scr:url("fonts/raphaelicons-webfont.eot") format("eot"),
		url("fonts/raphaelicons-webfont.svg") format("svg"),
		url("fonts/raphaelicons-webfont.ttf") format("true-type"),
		url("fonts/raphaelicons-webfont.woff") format("woff");
	font-weight:normal;
	font-style:normal;
}
body {
	font-smoothing:antialiased;//字体反锯齿，
	//更圆滑，多用在英文上
	overflow:hidden;
}

// .footer {
// 	width:100%;
// 	position:fixed;
// 	bottom:0;
// 	z-index:100;
// 	input,a{
// 		float:left;
// 		width:20%;
// 		background:#e6b8af;
// 		height:40px;
// 		line-height:40px;
// 		text-align:center;
// 		@include text-shadow(2px 2px 2px);
// 	}

// 	input {
// 		position:absolute;
// 		// @extend a;	
// 		opacity:0;
// 		z-index:999;
// 		&:hover + a{
// 			@include transition(1s);
// 			background:#a64d79;
// 		}
// 		&:checked + a,&:checked:hover + a {
// 			background:#ea9999;
// 			@include transition(0.5s);
// 			span {
// 				opacity:1;
// 				@include transition(0.5s);
// 			}
// 		}
// 	}
// 	a {
// 		position:relative;
// 		z-index:9;
// 		span {
// 			width:0;
// 			height:0;
// 			border-color:transparent transparent #ea9999 transparent;
// 			border-width:0 20px 20px 20px;
// 			border-style:solid;
// 			position:absolute;
// 			left:120px;
// 			top:-20px;
// 			opacity:0;
// 		}
// 	}
// }
.footer {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	input,a {
		position:fixed;
		width:20%;
		height:34px;
		line-height:34px;
		text-align:center; 
		background:#e6b8af;
		bottom:0;
	}
	input {
		z-index:1000;
		opacity:0;
		&:hover + a {
			background:#a64d79;
		}
		&:checked + a {
			@include transition(0.5s);
			background:#ea9999;
			&:after {
				content:"";
				border:20px solid transparent;
				border-bottom-color:#ea9999;
				position:absolute;
				bottom:100%;
				left:50%;
				margin-left:-20px;
			}
		}

	}
	a {
		z-index:10;
	}
}
.nav-1,.nav-1 + a {
	left:0;
}
.nav-2,.nav-2 + a {
	left:20%;
}
.nav-3,.nav-3 + a {
	left:40%;
}
.nav-4,.nav-4 + a {
	left:60%;
}
.nav-5,.nav-5 + a {
	left:80%;
}

.contents,.common {
	position:relative;
	width:100%;
	height:100%;
}

.contents {
	left:0;
	top:0;
	@include transition(1s);
	@include transform(translate3d(0 0 0));
	// @include backface-visibility(hidden);
}
.nav-1:checked ~ .contents {
	@include transform(translateY(0%));
}
.nav-2:checked ~ .contents {
	@include transform(translateY(-100%));
}
.nav-3:checked ~ .contents {
	@include transform(translateY(-200%));
}
.nav-4:checked ~ .contents {
	@include transform(translateY(-300%));
}
.nav-5:checked ~ .contents {
	@include transform(translateY(-400%));
}

#first-cont,#third-cont,#sec-cont,#four-cont,#five-cont {
	div	{
		width:200px;
		height:200px;
		background:#fff;
		position:absolute;
		left:50%;
		margin-left:-100px;
		// top:-100px;
		// @include transform(rotate(45deg));
		top:0;
		@include transform(translateY(-50%) rotate(45deg));
	}
}
#first-cont,#third-cont,#five-cont {
	div	{
		background:#d829d8;
	}
	h2,p {
		color:#d829d8;
	}
}
#sec-cont,#four-cont {
	background:#d829d8;
	h2,p {
		color:#fff;
	}
}

[data-icon]:after {
	content:attr(data-icon);
	color:red;
	font-family:"Raphaelicons";
	position:absolute;
	left:50%;
	top:50%;
	margin:15px 0 0 18px;
	@include transform(rotate(-45deg));
}
.common {
	overflow:hidden;
	h2,p {
		width:100%;
		font-weight:900;
		text-align:center;
		position:absolute;
		@include backface-visibility(hidden);
	}
	h2 {
		top:30%;
	}
	p {
		top:40%;
	}
}
.nav-1:checked ~ .contents #first-cont h2,
.nav-2:checked ~ .contents #sec-cont h2,
.nav-3:checked ~ .contents #third-cont h2,
.nav-4:checked ~ .contents #four-cont h2,
.nav-5:checked ~ .contents #five-cont h2 {
	@include animation(moveup 1s linear 0.2s backwards);
}
@include keyframes(moveup) {
	from {top:20%; opacity:0}
	to {top:30%;opacity:1}
}
.nav-1:checked ~ .contents #first-cont p,
.nav-2:checked ~ .contents #sec-cont p,
.nav-3:checked ~ .contents #third-cont p,
.nav-4:checked ~ .contents #four-cont p,
.nav-5:checked ~ .contents #five-cont p {
	@include animation(movedown 1s linear 0.2s backwards);
}
@include keyframes(movedown) {
	from {top:50%; opacity:0}
	to {top:40%;opacity:1}
}

@media screen and (max-width:520px) {
	#first-cont,#third-cont,#sec-cont,#four-cont,#five-cont {
		div {
			width:100px;
			height:100px;
			margin-left:-50px;
		}
	}
}